
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Menu, {
    MenuProvider,
    MenuOptions,
    MenuOption,
    MenuTrigger,
    renderers,
} from 'react-native-popup-menu';

const { ContextMenu, SlideInMenu, Popover } = renderers;

class BasicExampleComponent extends Component {

    constructor(props, ctx) {
        super(props, ctx);
        this.state = { renderer: ContextMenu };
    }


    render() {
        return (
            <Menu
                renderer={Popover}
            >
                <MenuTrigger text='edit' />
                <MenuOptions>
                    <MenuOption value={1} text='One' />
                    <MenuOption value={2}>
                        <Text >Two</Text>
                    </MenuOption>
                    <MenuOption value={3}  text='Three' />
                </MenuOptions>
            </Menu>
        );
    }

}

const BasicExample = () => (
    <MenuProvider customStyles={menuProviderStyles}>
        <BasicExampleComponent />
    </MenuProvider>
)

export default BasicExample

const triggerStyles = {
    triggerText: {
        color: 'white',
    },
    triggerOuterWrapper: {
        // backgroundColor: 'orange',
        // padding: 5,
        // flex: 1,
    },
    triggerWrapper: {
        // backgroundColor: 'blue',
        // alignItems: 'center',
        // justifyContent: 'center',
        // flex: 1,
    },
    triggerTouchable: {
        // underlayColor: 'darkblue',
        // activeOpacity: 70,
        // style : {
        //     flex: 1,
        // },
    },
};

const optionsStyles = {
    optionsContainer: {
        backgroundColor: 'green',
        padding: 5,
    },
    optionsWrapper: {
        backgroundColor: 'purple',
    },
    optionWrapper: {
        backgroundColor: 'yellow',
        margin: 5,
    },
    optionTouchable: {
        underlayColor: 'gold',
        activeOpacity: 70,
    },
    optionText: {
        color: 'brown',
    },
};

const optionStyles = {
    // optionTouchable: {
    //     underlayColor: 'red',
    //     activeOpacity: 40,
    // },
    // optionWrapper: {
    //     backgroundColor: 'pink',
    //     margin: 5,
    // },
    // optionText: {
    //     color: 'black',
    // },
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        padding: 30,
    },
    backdrop: {
        backgroundColor: 'red',
        opacity: 0.5,
    },
    // anchorStyle: {
    //     backgroundColor: 'blue',
    // },
});

const menuProviderStyles = {
    menuProviderWrapper: styles.container,
    backdrop: styles.backdrop,
};
